/*
* @Author: Josh
* @Date:   2019-08-15 20:08:18
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-27 16:18:21
*/

/* 搜索框 */
.ju-search {
    max-width : 640px;
    margin    : 0 auto;
    background: #f8f8f8;
    z-index   : 110;
}
/* 搜索框输入状态，覆盖内容区 */
.ju-search.on-focus {
    position  : fixed;
    left      : 0;
    right     : 0;
    top       : 0;
    bottom    : 0;
    overflow-y: auto;
}

/* 有标题栏时 */
.ju-header ~ .ju-content .ju-search.onfocus {
    top: 2.3rem;
}
/* 有导航栏时 */
.ju-navbar ~ .ju-content .ju-search.on-focus {
    bottom: 2.5rem;
}

/* 搜索栏中的表单 */
.ju-search > .ju-search-form {
    display    : flex;
    height     : 2.3rem;
    align-items: center;
}

/* 输入框容器 */
.ju-search  > .ju-search-form > .ju-search-input-wrap {
    flex    : 1;
    position: relative;
    padding : 0 .5rem;
}
/* 取消按钮 */
.ju-search > .ju-search-form > .ju-search-cancel {
    flex         : 0 0 2.2rem;
    padding-right: .5rem;
    text-align   : center;
    font-size    : .7rem;
    display      : none;
}
/* 对取消按钮进行控制 */
.ju-search.on-focus > .ju-search-form > .ju-search-cancel {
    display: block;
}


/* 搜索图标 */
.ju-search .ju-search-icon {
    position   : absolute;
    height     : .8rem;
    line-height: .8rem;
    font-size  : .8rem;
    top        : 0;
    bottom     : 0;
    left       : 1rem;
    margin     : auto;
    color      : #ccc;
}
/* 输入框 */
.ju-search .ju-search-input {
    box-sizing   : border-box;
    width        : 100%;
    height       : 1.6rem;
    border       : none;
    font-size    : .8rem;
    padding-left : 1.5rem;
    background   : #fff;
    border-radius: .2rem;
}
/* 清空按钮 */
.ju-search .ju-search-clear {
    position     : absolute;
    height       : .8rem;
    line-height  : .8rem;
    width        : .8rem;
    font-size    : .6rem;
    top          : 0;
    right        : 1rem;
    bottom       : 0;
    margin       : auto 0;
    border-radius: 50%;
    color        : #fff;
    background   : #ccc;
    display      : none;
}
/* 对清空按钮的控制 */
.ju-search .ju-search-input:valid + .ju-search-clear {
    display: block;
}


/* 搜索建议 */
.ju-search > .ju-search-suggest {
    display: none;
}
.ju-search.on-focus > .ju-search-suggest {
    display: block;
}
/* 搜索建议内容 */
.ju-search > .ju-search-suggest > .ju-suggest-item {
    padding-left : 1rem;
    height       : 2rem;
    line-height  : 2rem;
    font-size    : .8rem;
    background   : #fff;
    border-bottom: 1px solid #eee;
    color        : #333;
}